<template>
<div class="app-container calendar-list-container">
  <div class="filter-container">
     <el-button-group>
    <el-button type="primary" v-if="menuManager_btn_add" icon="plus" @click="handlerAdd">添加</el-button>
    <el-button type="primary" v-if="menuManager_btn_edit" icon="edit" @click="handlerEdit">编辑</el-button>
    <el-button type="primary" v-if="menuManager_btn_del" icon="delete" @click="handleDelete">删除</el-button>
  </el-button-group>
  </div>

<el-row>
  <el-col :span="8" style='margin-top:15px;'>
    <el-input
      placeholder="输入关键字进行过滤"
      v-model="filterText">
    </el-input>
    <el-tree
      class="filter-tree"
      :data="treeData"
      node-key="id"
      highlight-current
      :props="defaultProps"
      :filter-node-method="filterNode"
      ref="menuTree"
      @node-click="getNodeData"
      default-expand-all
      >
    </el-tree>
  </el-col>
  <el-col :span="16" style='margin-top:15px;'>
     <el-card class="box-card">
    <el-form :label-position="labelPosition" label-width="100px" :model="form" :rules="rules" ref="form">
      <el-form-item label="路径编码" prop="code">
          <el-input v-model="form.code" :disabled="formEdit" placeholder="请输入路径编码(需要唯一)"></el-input>
      </el-form-item>
      <el-form-item label="标题" prop="title">
          <el-input v-model="form.title" :disabled="formEdit"  placeholder="请输入标题"></el-input>
      </el-form-item>
      <el-form-item label="父级节点" prop="parentId">
          <el-input v-model="form.parentId" :disabled="formEdit" placeholder="请输入父级节点" readonly></el-input>
      </el-form-item>
      <el-form-item label="图标" prop="icon">
          <el-input v-model="form.icon" :disabled="formEdit" placeholder="请输入图标"></el-input>
      </el-form-item>     
      <el-form-item label="类型" prop="type">
      <el-select class="filter-item" v-model="form.type" :disabled="formEdit" @change="changeType" placeholder="请输入资源请求类型">
          <el-option v-for="item in typeOptions" :key="item.typeId" :label="item.typeName" :value="item.typeId"> </el-option>
      </el-select>
      </el-form-item>       
      <el-form-item label="前端组件" prop="component">
          <el-input v-model="form.component" :disabled="formEdit" placeholder="请选择或输入前端组件"></el-input>
      </el-form-item>
      <el-form-item label="导航菜单" prop="activeMenu">
          <el-input v-model="form.activeMenu" :disabled="formEdit" placeholder="导航菜单"></el-input>
      </el-form-item>    
      <el-form-item label="显示" prop="hidden">
      <el-select class="filter-item" v-model.number="form.hidden" type="number" :disabled="formEdit" placeholder="请选择是否显示">
          <el-option v-for="item in hiddenOptions" :key="item.id" :label="item.name" :value="item.id"> </el-option>
      </el-select>
      </el-form-item>        
      <el-form-item label="排序" prop="orderNum">
          <el-input v-model="form.orderNum" :disabled="formEdit" placeholder="请输入排序"></el-input>
      </el-form-item>
      <el-form-item label="描述"  prop="description">
          <el-input v-model="form.description" :disabled="formEdit" placeholder="请输入描述"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="enabled">
      <el-select class="filter-item" v-model.number="form.enabled" type="number" :disabled="formEdit" placeholder="请选择状态">
          <el-option v-for="item in statusOptions" :key="item.statusId" :label="item.statusName" :value="item.statusId"> </el-option>
      </el-select>
      </el-form-item>
       <el-form-item v-if="formStatus == 'update'">
        <el-button type="primary" @click="update">更新</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
      <el-form-item v-if="formStatus == 'create'">
        <el-button type="primary" @click="create('form')">保存</el-button>
        <el-button type="success" @click="setRootMenu">设置为根目录</el-button>
        <el-button @click="onCancel">取消</el-button>
      </el-form-item>
    </el-form>
     </el-card>
    <el-card class="box-card">
      <span>按钮或资源</span>
      <menu-element :menuId='currentId' ref="menuElement"></menu-element>
    </el-card>
  </el-col>
</el-row>
  </div>
</template>

<script>
import {
  fetchTree, getObj, addObj, delObj, putObj
} from 'api/admin/menu/index';
import { mapGetters } from 'vuex';
import { isInteger } from 'api/validator';
export default {
  name: 'menu',
  components: {
    'menu-element': () => import('./components/element')
  },
  data() {
    return {
      rules: {
        code: [
          {
            required: true,
            message: '请输入路径编码',
            trigger: 'blur'
          },
          {
            max: 100,
            message: '长度在 100 个字符以内',
            trigger: 'blur'
          }
        ],
        title: [
          {
            required: true,
            message: '请输入标题',
            trigger: 'blur'
          },
          {
            max: 100,
            message: '长度在 100 个字符以内',
            trigger: 'blur'
          }
        ],
        href: [
          {
            required: true,
            message: '请选择或输入前端组件',
            trigger: 'blur'
          },
          {
            max: 200,
            message: '长度在 200 个字符以内',
            trigger: 'blur'
          }
        ],
         type: [
          {
            required: true,
            message: '请选类型',
            trigger: 'blur'
          }
        ]
      },      
      filterText: '',
      list: null,
      total: null,
      formEdit: true,
      formAdd: true,
      formStatus: '',
      showElement: false,
      typeOptions: [
        {typeId: 'menu', typeName: '菜单'}, 
        {typeId: 'dirt', typeName: '目录'}
      ],      
      statusOptions: [
        {statusId: 1, statusName: '有效'}, 
        {statusId: 0, statusName: '无效'}
      ],
      hiddenOptions: [
        {id: 1, name: '否'}, 
        {id: 0, name: '是'}
      ],
      listQuery: {
        name: undefined
      },
      treeData: [],
      defaultProps: {
        children: 'children',
        label: 'title'
      },
      labelPosition: 'right',
      form: {
        code: undefined,
        title: undefined,
        parentId: undefined,
        href: undefined,
        icon: undefined,
        orderNum: 99,
        description: undefined,
        path: undefined,
        enabled: 1,
        type: undefined,
        hidden: 0,
        component: undefined,
        activeMenu: undefined
      },
      currentId: -1,
      currentTitle: '',
      menuManager_btn_add: false,
      menuManager_btn_edit: false,
      menuManager_btn_del: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.menuTree.filter(val);
    }
  },
  created() {
    this.getList();
    this.menuManager_btn_add = this.elements['menuManager:btn_add'];
    this.menuManager_btn_del = this.elements['menuManager:btn_del'];
    this.menuManager_btn_edit = this.elements['menuManager:btn_edit'];
  },
  computed: {
    ...mapGetters([
      'elements'
    ])
  },
  methods: {
    getList() {
      fetchTree(this.listQuery).then(data => {
        this.treeData = data;
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getNodeData(data) {
      if (!this.formEdit) {
        this.formStatus = 'update';
      }
      getObj(data.id).then(response => {
        this.form = response.data;
      });
      this.currentId = data.id;
      this.currentTitle = data.title;
      this.showElement = true;
      this.$refs.menuElement.menuId = data.id;
      this.$refs.menuElement.getList();
    },
    handlerEdit() {
      if (this.form.menuId) {
        this.formEdit = false;
        this.formStatus = 'update';
      }
    },
    handlerAdd() {
      this.resetForm();
      this.formEdit = false;
      this.formStatus = 'create';
    },
    handleDelete() {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        delObj(this.currentId).then(() => {
          this.getList();
          this.resetForm();
          this.onCancel();
          this.$notify({
            title: '成功',
            message: '删除成功',
            type: 'success',
            duration: 2000
          });
        });
      });
    },
    update() {
      putObj(this.form.menuId, this.form).then(() => {
        this.getList();
        this.$notify({
          title: '成功',
          message: '更新成功',
          type: 'success',
          duration: 2000
        });
      });
    },
    create(formName) {
      const set = this.$refs;
      set[formName].validate(valid => {
        if (valid) {
          addObj(this.form).then(response => {
            this.getList();
            this.$message.success('创建成功');
          })
        } else {
          return false;
        }
      });
    },
    onCancel() {
      this.formEdit = true;
      this.formStatus = '';
    },
    setRootMenu() {
      this.currentId = -1;
      this.form.parentId = -1; 
    },
    changeType(val) {
      if(val){
        if(val == 'dirt'){
          if(this.form.parentId > 0){
            this.form.component = 'SubLayout';
          }
          else{
            this.form.component = 'Layout';
          }
        }
      }
    }, 
    resetForm() {
      this.form = {
        code: undefined,
        title: undefined,
        parentId: this.currentId,
        href: undefined,
        icon: undefined,
        orderNum: 99,
        description: undefined,
        path: undefined,
        enabled: 1,
        type:undefined,
        hidden: 0,
        component: undefined,
        activeMenu: undefined
      };
    }
  }
}
</script>

